<template>
	<view class="container">
		
		<view class="segmentedControl">
			
			<view class="content">
				<view >
					<resource @page="page" @keyVlalue="searsh" :item="dataInfo" :customStyle2="customStyle2"
						:isTrue="false"></resource>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import resource from '../../components/resource/resource.vue'
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import useGetGlobalProperties from '@/util/useGlobal.js'
	const url = useGetGlobalProperties().$httpUrl;
	const httpUrlWx = useGetGlobalProperties().$httpUrlWx;
	const urls = useGetGlobalProperties().$https;
	const book = useGetGlobalProperties().$book;
	const audio = useGetGlobalProperties().$audio;
	const journal = useGetGlobalProperties().$journal;
	const video = useGetGlobalProperties().$vedio;
	const user = uni.getStorageSync('userInfo');
	const dataInfo = ref();
	const searshs = url + '/search.png';
	const listPourp = httpUrlWx + '/list.png';
	const typeData = ref();
	const currents = ref(0)
	const popupTo = ref();
	const typeList = ref();
	const key = ref();
	const customStyle2 = ref({
		boxShadow: '2px 2px 5px rgba(0, 0, 0.2, 0.5)'
	});
	let bookIds = ref();
	// urls=http://nongjiashuwu.shuzinongyue.com:8081/#/bookSpecialData
	onLoad((option) => {
		// uni.showLoading({
		// 	title:'正在加载中'
		// })
		if(option.bookId){
			bookIds.value = option.bookId;
			loadInit();
		}
	});
	const tiao = (i) => {
		let urls = '';
		if (i.dataTypeId == book) {
			urls = '/pages/index/bookDetail/bookDetail?id=' + i.resourceId
		} else if (i.dataTypeId == audio) {
			urls = '/pages/index/audioDetails/audioDetails?id=' + i.resourceId
		} else if (i.dataTypeId == journal) {
			urls = '/pages/index/journalDetails/journalDetails?id=' + i.resourceName
			uni.setStorageSync('selectJ', i.resourceId);
		} 
		// else {
		// 	urls = '/pages/index/videoDetails/videoDetails?id=' + i.resourceId
		// }
		uni.navigateTo({
			url: urls
		})
	}
	const loadInit = () => {
		uni.showLoading({
			title: '正在加载中'
		})
		uni.request({
			url: urls + `/ruralLibrary/resource/particularsBooks/${bookIds.value}`,
			method: 'GET',
			success: (res) => {
				console.log('list', res.data.data);
				dataInfo.value = res.data.data;
				

			}
		})

		setTimeout(function() {
			uni.hideLoading();
		}, 2000);
	}
	const searsh = () => {
		uni.navigateTo({
			url: '/pages/searsh/searsh?keys=' + key.value
		})
	}
	const openPourp = () => {
		popupTo.value.open('bottom')
		let typeId = '';
		if (current.value == 0) {
			typeId = book;
		} else if (current.value == 1) {
			typeId = audio;
		} else if (current.value == 2) {
			typeId = video;
		} else {
			typeId = journal;
		}
		uni.request({
			url: urls + '/ruralLibrary/bookType/list/' + typeId,
			method: 'GET',
			success: (res) => {
				console.log('res',res)
				typeList.value = res.data.data;
			}
		})
	}
	onReachBottom(async () => {
		// page();
	})
	const flushs = ref(true);
	const page = async () => {
		// if (flushs.value == true) {
		// uni.showLoading({
		// 	title: '正在加载中'
		// })
		// console.log('1111')
		// currents.value++;
		
		// 	uni.request({
		// 		url: urls + '/wxApi/appInterface/getResources',
		// 		method: 'GET',
		// 		data: {
		// 			size: 9,
		// 			current: currents.value,
		// 			id: typeData.value
		// 		},
		// 		success: (res) => {
		// 			console.log('res.data.records', res.data)
		// 			console.log('dataInfo.value', dataInfo.value)
		// 			if (res.data.data.records == []) {
		// 				flushs.value = false;
		// 				return;
		// 			}
		// 			for (let i = 0; i < res.data.data.records.length; i++) {
		// 				dataInfo.value.push(res.data.data.records[i]);
		// 			}
					
		// 			setTimeout(function() {
		// 				uni.hideLoading();
		// 			}, 2000);
		// 		}
		// 	})
		// } else {
		// 	uni.showToast({
		// 		title: '已经到底啦',
		// 		duration: 2000,
		// 		icon: 'error'
		// 	});
		// }

	}
	const opemResoures = (e) => {
		uni.showLoading({
			title: '正在加载中'
		})
		typeData.value = e.id;
		uni.request({
			url: urls + '/wxApi/appInterface/getResources',
			method: 'GET',
			data: {
				size: 9,
				current: currents.value,
				id: e.id
			},
			success: (res) => {
				console.log('res.data.records', res.data)
				dataInfo.value = res.data.data.records;
				console.log('dataInfo.value', dataInfo.value)
				uni.hideLoading()
				popupTo.value.close();
			}
		})
	}
	const onClickItem = (e) => {
		console.log("e", e)
		if (current.value !== e.currentIndex) {
			current.value = e.index;
			currents.value = 0;
			uni.showLoading({
				title: '正在加载中'
			})
			// current.value = e.index;
			// uni.hideTabBar();
			// clear.value = false
			// selectAll.value = []
			//typeData.value = e.id;
			let id = '';
			const book = uni.getStorageSync('book')
			const audio = uni.getStorageSync('audio')
			const journal = uni.getStorageSync('journal')
			const vedio = uni.getStorageSync('vedio')
			if (current.value == 0) {
				id = book;
			} else if (current.value == 1) {
				id = audio;
			} else if (current.value == 3) {
				id = journal;
			} else if (current.value == 2) {
				id = vedio;
			}
			let users = uni.getStorageSync('userInfo');
			// uni.request({
			// 	url: urls + '/wxApi/collect/getUserResource/' + users.openId + '/' + id,
			// 	method: 'GET',
			// 	success: (res) => {
			// 		dataInfo.value = res.data.data;
			// 		console.log('dataInfo.value', dataInfo.value)
			// 		uni.hideLoading()
			// 	}
			// })
			currents.value = 1;
			uni.request({
				url: urls + '/ruralLibrary/bookType/list/' + id,
				method: 'GET',
				success: (res) => {

					if (res.data != '' || !res.data) {
						console.log('type', res.data.data);
						typeData.value = res.data.data[0].id;
						console.log('typeData.value', typeData.value);

						uni.request({
							url: urls + '/wxApi/appInterface/getResources',
							method: 'GET',
							data: {
								current: currents.value,
								id: typeData.value
							},
							success: (res) => {
								console.log('res.data.records', res.data)
								dataInfo.value = res.data.data.records;
								console.log('dataInfo.value', dataInfo.value)
								uni.hideLoading()
							}
						})
						return;
					}
					dataInfo.value = []
					uni.hideLoading()
					return;

				}
			})
		}
	};
	onMounted(() => {

	})

	const items = ref([{
		name: '图书',
	}, {
		name: '音频',
	}, {
		name: '视频'
	}, {
		name: '期刊'
	}]);
	const current = ref(0);
	const isTrue = ref(true);
	const getList = [{
			name: '政治法律',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}

			],
		},
		{
			name: '文学传纪',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		},
		{
			name: '自然科普',

			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		},
		{
			name: '农业科技',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}
	];
	const getList1 = [{
			name: '政治法律',
			childrens: [{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '黄梅戏：小乔初嫁',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					name: '第9集 河南坠子《偷年糕》 演员某某某',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},

			],
		},
		{
			name: '文学传纪',
			childrens: [{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					name: '黄梅戏：小乔初嫁',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '第9集 河南坠子《偷年糕》 演员某某某',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				}
			],
		},
		{
			name: '自然科普',

			childrens: [{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					name: '水浒传',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '三国演义',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				}
			],
		},
		{
			name: '农业科技',
			childrens: [{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					name: '水浒传',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '三国演义',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				}
			],
		}
	];
</script>

<style lang="scss" scoped>
	.ellipsisTo {
		text-align: center;
		width: 310rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		margin-top: 5%;
	}
	.resources1 {
		flex: 0 0 calc(33.33%); /* 计算宽度，考虑到右边距 */
		   margin-bottom: 5px;
		   display: flex;
		   flex-direction: column;
		   align-items: flex-start;
		   position: relative;
		   border-radius: 10rpx;
		/* 将资源项左对齐 */
	}
	.image-container {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 5%;
	}
	.image-item {
		margin-left: 3.3%;
		margin-top: 3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		/* 添加相对定位 */
		border-radius: 10rpx;
		text-align: center;
		/* 		margin-bottom: 5px; */
	}
	.list1 {
		max-width: 300rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
	}

	.uv-input-wrapper {

		transition: border-color 0.3s;

		&:focus-within {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 139, 255, 0.25);
			border-color: blue;
			border: 2rpx solid #008BFF;
		}
	}

	.divider1 {}

	.icon-wrapper {
		position: absolute;
		bottom: 80rpx;
		right: 13%;
	}

	.icon {
		width: 42rpx;
		height: 40rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		color: #fff;
	}

	.resources1 {
		flex: 0 0 calc(50%);
		/* 计算宽度，考虑到右边距 */
		margin-bottom: 5px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		border-radius: 10rpx;
		/* 负值修复左右间隙 */

	}

	.resources1_item {
		width: calc(50% - 4rpx);
		/* 一行显示两个，减去左右间隙 */
		position: relative;
		height: 280rpx;
		/* 设置一个固定高度 */
	}

	.uv-image {}


	.text-wrapper {
		width: 330rpx;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		text-overflow: ellipsis !important;
		margin-left: auto;
		margin-right: auto;
		/* 文字左对齐 */
	}

	.more {
		font-size: 24rpx;
		color: #86909C;
		margin-left: 360rpx;
		display: flex;
		align-items: center;
	}

	.resource_title {
		display: flex;
		align-items: center;

	}

	.resources_container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;

		padding: 0 30rpx;
		margin-top: 32rpx;
	}

	.search {
		padding: 0 30rpx;
		margin-top: 4%;
	}

	.divider {
		position: relative;
		bottom: 31rpx;
	}

	.controller {

		height: 84rpx;
		position: relative;
	}

	.segmentedControl {
		margin-top: 28rpx;
	}

	.titile {
		margin-left: 20rpx;
		margin-top: 72rpx;
		font-size: 38rpx;
	}

	.container {
		font-size: 36rpx;
		font-family: my-font;
		padding-bottom: 100rpx;
	}
</style>